<button class="catalog-toggle d-lg-none position-fixed top-0 left-0 h-100 p-0" type="button" data-bs-toggle="collapse" data-bs-target=".docs-catalog" aria-expanded="false" aria-controls="collapseCatalog">
    <i class="catalog-toggle-icon fas fa-chevron-left" data-fa-transform="rotate-180"></i>
</button>
<aside class="docs-catalog col-lg-2 collapse collapse-horizontal catalog-collapse" tabindex="-1" data-bs-hide="focusout">
  <div class="container px-0 px-lg-1">
    <div class="row card component">
      <div class="card-body">
        {{ template "walk-catalog" (dict "section" .FirstSection "page" .) }}
      </div>
    </div>
  </div>
</aside>

{{- define "walk-catalog" -}}
{{- $section := .section -}}
{{- $page := .page -}}
<ul class="list-unstyled mb-2">
    {{- range ($section.Pages.GroupBy "Weight" "desc") -}}
      {{- range sort .Pages "Title" -}}
        {{- if .IsSection -}}
        {{- $sectionId := printf "catalog-%s" .File.UniqueID -}}
        {{- $active := false -}}
        {{- if hasPrefix $page.Permalink .Permalink -}}
          {{- $active = true -}}
        {{- end -}}
        <li class="mb-2{{ if eq .Permalink $page.Permalink }} active{{ end }}" tabindex="-1">
          <div class="catalog-section bg-accent text-white px-2 py-1 d-flex justify-content-between align-items-center">
            <a href="{{ .Permalink }}">{{ .Name }}</a>
            <a class="btn-toggle collapsed ms-1" role="button" data-bs-toggle="collapse"
              data-bs-target="#{{ $sectionId }}" aria-expanded="{{ if $active }}true{{ else }}false{{ end }}" aria-controls="{{ $sectionId }}">
              <i class="btn-toggle-icon fas fa-arrow-left ms-auto" data-fa-transform="rotate-180"></i>
            </a>
          </div>
          <div class="mt-2 collapse{{ if $active }} show{{ end }}" id="{{ $sectionId }}">
            <ul class="btn-toggle-nav list-unstyled fw-normal ms-2">
              {{ template "walk-catalog" (dict "section" . "page" $page) }}
            </ul>
          </div>
        </li>
        {{- else -}}
        <li class="mb-2{{ if eq .Permalink $page.Permalink }} active text-accent{{ end }}" tabindex="-1">
          <a href="{{ .Permalink }}">{{ .Title }}</a>
        </li>
        {{- end -}}
      {{- end -}}
    {{- end -}}
</ul>
{{- end -}}
